<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<ksp-cropper mode="free" :width="220" :height="220" :maxWidth="750" :maxHeight="1024" :url="imgurl"
			@cancel="oncancel" @ok="onok"></ksp-cropper>
		<view class="hander">
			<view class="hander-user" @click="upImage">
				<view class="image">
					<!-- <image src="@/static/my/avatar.png" mode=""></image> -->
					<image :src="dto.headUrl" mode=""></image>
				</view>
				<view class="user">
					更换头像
				</view>
			</view>
		</view>
		<view class="from-content">
			<view class="one-realName">
				<view class="realName">
					昵称
				</view>
				<!-- <u--input v-model="realName" border="none" pl ></u--input> -->
				<view class="right">
					<input type="text" v-model="dto.realName" border="none" placeholder="请输入昵称" />
				</view>
			</view>
			<view class="one-mobile">
				<view class="mobile">
					手机号码
				</view>
				<view class="right">
					<input type="text" v-model="dto.modifyPhoneCopy" border="none" placeholder="请输入手机号"
						style="height: 48rpx;" @blur="setPhone" @confirm="setPhone" />
					<view class="replacement" @click="delmobile">
						更换
					</view>
				</view>

			</view>
			<view class="one-mobile">
				<view class="mobile">
					证件号码
				</view>
				<view class="right">
					<input type="text" v-model="dto.idCodeCopy" border="none" placeholder="请输入证件号码" @blur="setIdCard"
						@confirm="setIdCard" />
				</view>

			</view>

			<view class="one" @click="nav">
				<view class="">
					用户服务协议
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="one">
				<view class="">
					隐私政策
				</view>
				<view class="">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="btn" @click="add">
			<view class="btn-btn">
				保存
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: '个人信息',
				fileList: [],
				dto: {
					realName: '', //昵称
					modifyPhone: '', //手机号
					modifyPhoneCopy: '', //手机号
					headUrl: '', // 头像
					idCode: '', // 证件号
					idCodeCopy: '', // 证件号
					id: ''
				},
				picList: [],
				objList: {},
				imgurl: '',
				src:''
			}
		},
		onLoad(options) {
			// // 获取缓存
			this.objList = JSON.parse(uni.getStorageSync('userInfo'));
			this.dto.modifyPhone = this.objList.mobile
			// this.dto.modifyPhoneCopy = this.$aesTm.tuomin(this.objList.mobile, 2);
			this.dto.modifyPhoneCopy = this.objList.mobile;
			this.dto.headUrl = this.objList.headUrl
			this.dto.id = this.objList.id
			this.dto.idCode = this.objList.idCode
			this.dto.idCodeCopy = this.$aesTm.tuomin(this.objList.idCode, 3);
			console.log(options)
			this.dto.realName = this.objList.realName
			if(options.src){
				this.src = options.src
			}
			
		},

		methods: {
			setPhone(e) {
				this.dto.modifyPhone = e.target.value;
			},
			setIdCard(e) {
				this.dto.idCode = e.target.value;
			},
			nav() {
				uni.navigateTo({
					url: '/pagesTrip/Useragreement/Useragreement'
				})
			},
			// 上传头像
			upImage() {
				uni.chooseImage({
					sourceType: ['album'], //从相册选择
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						this.$api.detectionContent(tempFilePaths[0], 2).then(result => {
							if (result.code === 0) {
								uni.uploadFile({
									url: 'https://i.ringzle.com/island-cloud-server/oss/file/aliyunUpload',
									filePath: tempFilePaths[0],
									name: 'file',
									header: {
										token: wx.getStorageSync('access_token')
									},
									success: res => {
										let data = JSON.parse(res.data);
										this.imgurl = data.data.url;
										this.dto.headUrl = data.data.url
									}
								});
							} else this.$showToast(result.msg)
						})
					},
					fail: err => {
						this.myToast('图片上传失败', 'none');
					}
				});
			},

			// 更换手机号
			delmobile() {
				this.dto.modifyPhone = ''
				this.dto.modifyPhoneCopy = ''
			},
			// 保存
			add() {
				if (!this.$reg.mobile(this.dto.modifyPhone)) return this.$showToast('请输入正确的手机号');
				if (this.dto.idCode && !this.$reg.idCard(this.dto.idCode)) return this.$showToast('请输入正确的身份证号');
				this.$api.detectionContent(this.dto.realName).then(result => {
					if (result.code !== 0) return this.$showToast(result.msg);

					let newDto = JSON.parse(JSON.stringify(this.dto));
					newDto.modifyPhone = this.$aesTm.encrypt(newDto.modifyPhone);
					newDto.idCode = this.$aesTm.encrypt(newDto.idCode);
					delete newDto.idCodeCopy
					delete newDto.modifyPhoneCopy
					this.$api.post('/api/umc/updateUser', newDto).then(res => {
						if (res.data.code == 0) {
							this.objList.mobile = this.dto.modifyPhone
							this.objList.realName = this.dto.realName
							this.objList.headUrl = this.dto.headUrl
							this.objList.idCode = this.dto.idCode
							uni.setStorageSync('userInfo', JSON.stringify({
								...this.objList
							}))
							this.$showToast('保存成功');
							setTimeout(() => {
								if(this.src == 'coupon'){
									uni.reLaunch({
										url: '/pagesMy/coupon/coupons'
									})
								}else{
									uni.reLaunch({
										url: '/pages/my/index'
									})
								}
								
							}, 1500)
						}
					})
				})
			},
			onok(ev) {
				this.imgurl = "";
			},
			oncancel() {
				this.imgurl = "";
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .panel {
		left: 0 !important;
	}

	.page {
		box-sizing: border-box;
		padding: 30rpx;
		// padding-top: 150rpx;
		height: 100%;

	}

	.hander {
		height: 340rpx;
		display: flex;
		flex-wrap: nowrap;
		text-align: center;
		margin: 0 auto;
		align-items: center;

		.hander-user {
			margin: 0 auto;
		}

		.image {
			width: 220rpx;
			height: 220rpx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}

		}

		.user {
			margin-top: 24rpx;
			font-size: 26rpx;
			color: #AAAAAA;
		}
	}

	.from-content {
		.one-realName {
			width: 100%;
			display: flex;
			align-items: center;
			height: 120rpx;
			line-height: 120rpx;
			border-bottom: 1rpx solid #EFEFEF;

			.realName {
				width: 188rpx;
				height: 120rpx;
				font-size: 30rpx;
				color: #333333;
				font-weight: bold;
			}

			.right {
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
			}
		}

		.one-mobile {
			display: flex;
			width: 100%;
			align-items: center;
			height: 120rpx;
			line-height: 120rpx;
			border-bottom: 1rpx solid #EFEFEF;

			.right {
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				height: 100%;
				align-items: center;
			}

			.mobile {
				width: 188rpx;
				height: 120rpx;
				font-size: 30rpx;
				color: #333333;
				font-weight: bold;
			}

			.replacement {
				border-radius: 50rpx;
				width: 80rpx;
				height: 48rpx;
				line-height: 48rpx;
				border: 1px solid #007A69;
				color: #007A69;
				font-weight: Regular;
				font-size: 24rpx;
				text-align: center;
				box-sizing: border-box;
			}
		}

		.one {
			height: 120rpx;
			line-height: 120rpx;
			display: flex;
			border-bottom: 1rpx solid #EFEFEF;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
		}
	}

	.btn {
		margin: 120rpx auto;
		width: 702rpx;
		height: 88rpx;
		display: flex;
		background-color: #007A69;
		line-height: 88rpx;
		border-radius: 50rpx;

		.btn-btn {
			margin: 0 auto;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: Regular;
		}
	}
</style>